import React,{useState} from 'react'

function TabList() {
    const [lists, setLists] = useState(0);
    const [listx, setListx] = useState(0);
    const [listy, setListy] = useState(0);
    const list = ['全部', '电商平台', '短视频平台', '微信/视频号'];
    const list2 = ['全部', '主图视频', '店铺首页视频', '竖屏视频', '横屏视频', '方形视频', '背景视频', '动态视频边框', '6:7视频']
    const list3 = ['全部', '通用', '政务媒体', '生活服务', '母婴亲子', '房地产', '商品零售', '跨境出口', '企业行政', 'IT互联网', '医疗保健', '食品生鲜', '更多v']
    return (
        <div>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              marginBottom: '10px'
            }}>
              <div>渠道</div>
              <ul style={{
                listStyleType: 'none',
                padding: 0,
                display: 'flex',
                flexWrap: 'wrap',
                marginLeft: '10px'
              }}>
                {list.map((item, index) => {
                  return <li key={index}
                    onClick={() => setLists(index)}
                    style={{
                      padding: '5px 10px',
                      cursor: 'pointer',
                      marginRight: '5px',
                      marginBottom: '5px',
                      backgroundColor: lists === index ? '#ddd' : 'transparent',
                    }}>{item}</li>
                })

                }
              </ul>
            </div>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              marginBottom: '10px'
            }}>
              <div>物料</div>
              <ul style={{
                listStyleType: 'none',
                padding: 0,
                display: 'flex',
                flexWrap: 'wrap',
                marginLeft: '10px'
              }}>
                {list2.map((item, index) => {
                  return <li key={index}
                    onClick={() => setListx(index)}
                    style={{
                      padding: '5px 10px',
                      cursor: 'pointer',
                      marginRight: '5px',
                      marginBottom: '5px',
                      backgroundColor: listx === index ? '#ddd' : 'transparent',
                    }}>{item}</li>
                })

                }
              </ul>
            </div>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              marginBottom: '10px'
            }}>
              <div>行业</div>
              <ul style={{
                listStyleType: 'none',
                padding: 0,
                display: 'flex',
                flexWrap: 'wrap',
                marginLeft: '10px'
              }}>
                {list3.map((item, index) => {
                  return <li key={index}
                    onClick={() => setListy(index)}
                    style={{
                      padding: '5px 10px',
                      cursor: 'pointer',
                      marginRight: '5px',
                      marginBottom: '5px',
                      backgroundColor: listy === index ? '#ddd' : 'transparent',
                    }}>{item}</li>
                })

                }
              </ul>
            </div>
        </div>
    )
}

export default TabList
